<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Boot首页</title>
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/bootstrap/css/bootstrap.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/scrollUp.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/doc.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootIndex.css}"/>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script th:src="@{/plugins/jquery/jquery.min.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/plugins/bootstrap/js/bootstrap.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/plugins/bootstrap-paginator.min.js}"></script>
</head>
<body>

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/v1/bootIndex">SongBoot</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <!-- 左侧  -->
                <ul class="nav navbar-nav">
                    <li><a href="/v1/index">后台首页</a></li>
                    <li><a href="/v1/topic/topics">主题列表</a></li>
                    <li><a href="/v1/doc/docManage">文档中心</a></li>
                    <li><a href="/v1/user/userBootManage">用户中心</a></li>
                </ul>
                <!-- 右侧-->
                <!--<ul class="nav navbar-nav navbar-right">
                    {% if user.is_authenticated %}
                    <li>
                        <a> Hello,{{ user.username }}</a>
                </li>
                <li>
                    <a href="{% url 'users:logout' %}">退出</a>
                </li>
                {% else %}
                <li>
                    <a href="{% url 'users:login' %}"> 登录 </a>
                </li>
                {% endif %}
                </ul>-->
            </div>
        </div>
    </div>

    <div class="jumbotron subhead">
        <div class="container">
            <h2>Welcome to SongBoot !</h2>
            <p>SongBoot 是一款后台管理系统后台使用当下流行的 SpringBoot + mybatis + mybatisplus，可以高效快速的构建WEB开发
                前端使用 bootstrap + layui + scrollUp + jquery + Thymeleaf</p>
            <p><a class="btn btn-success btn-lg" href="#" role="button">了解更多 »</a></p>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-sm-3 col-md-2 sidebar">
                <ul class="nav nav-sidebar nav-border" th:border="1">
                    <li class="active"><a href="#"><i class="fa fa-chevron-right"></i>主页</a></li>
                    <li><a href="#setting"><i class="fa fa-chevron-right"></i>设置中心</a></li>
                    <li><a href="#follow"><i class="fa fa-chevron-right"></i>我的关注</a></li>
                    <li><a href="#"><i class="fa fa-chevron-right"></i>主题列表</a></li>
                    <li><a href="#"><i class="fa fa-chevron-right"></i>我的收藏</a></li>
                    <li><a href="#"><i class="fa fa-chevron-right"></i>标签</a></li>
                    <li><a href="#"><i class="fa fa-chevron-right"></i>历史记录</a></li>
                    <li><a href="#contents"><i class="fa fa-chevron-right"></i>内容</a></li>
                </ul>
            </div>
            <div class="col-sm-6">
            </div>
            <div class="col-sm-3 pull-right">
                <div class="_box">
                    <a class="_btn _btn_green">发布产品</a>
                </div>
                <div class="_box">
                    <div class="tag_title">
                        标签云
                    </div>
                    <div class="pt15">
                        <a class="tag_item"><i class="fa fa-tag"></i>语言</a>
                        <a class="tag_item"><i class="fa fa-tag"></i>历史</a>
                        <a class="tag_item"><i class="fa fa-tag"></i>文学</a>
                        <a class="tag_item"><i class="fa fa-tag"></i>史学</a>
                        <a class="tag_item"><i class="fa fa-tag"></i>中国近代历史</a>
                        <a class="tag_item"><i class="fa fa-tag"></i>天文地理</a>
                        <a class="tag_item"><i class="fa fa-tag"></i>神魔世界</a>
                        <a class="tag_item"><i class="fa fa-tag"></i>起点文学</a>
                        <a class="tag_item"><i class="fa fa-tag"></i>爱神丘比特</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="py-5 bg-light">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="card mb-4">
                        <svg class="bd-placeholder-img card-img-top" width="100%" height="225"
                             xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false"
                             role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title>
                            <rect width="100%" height="100%" fill="#55595c"></rect>
                            <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
                        </svg>
                        <div class="card-body">
                            <p class="card-text">
                                This is a wider card with supporting text below as a natural lead-in to
                                additional content. This content is a little bit longer.
                            </p>
                            <div class="d-flex">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-success">更多详情</button>
                                </div>
                                <small class="text-muted">9 mins</small>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card mb-4">
                        <svg class="bd-placeholder-img card-img-top" width="100%" height="225"
                             xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false"
                             role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title>
                            <rect width="100%" height="100%" fill="#55595c"></rect>
                            <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
                        </svg>
                        <div class="card-body">
                            <p class="card-text">
                                This is a wider card with supporting text below as a natural lead-in to
                                additional content. This content is a little bit longer.
                            </p>
                            <div class="d-flex">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-success">更多详情</button>
                                </div>
                                <small class="text-muted">9 mins</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card mb-4">
                        <svg class="bd-placeholder-img card-img-top" width="100%" height="225"
                             xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false"
                             role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title>
                            <rect width="100%" height="100%" fill="#55595c"></rect>
                            <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
                        </svg>
                        <div class="card-body">
                            <p class="card-text">
                                This is a wider card with supporting text below as a natural lead-in to
                                additional content. This content is a little bit longer.
                            </p>
                            <div class="d-flex">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-success">更多详情</button>
                                </div>
                                <small class="text-muted">9 mins</small>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card mb-4">
                        <svg class="bd-placeholder-img card-img-top" width="100%" height="225"
                             xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false"
                             role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title>
                            <rect width="100%" height="100%" fill="#55595c"></rect>
                            <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
                        </svg>
                        <div class="card-body">
                            <p class="card-text">
                                This is a wider card with supporting text below as a natural lead-in to
                                additional content. This content is a little bit longer.
                            </p>
                            <div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-success">更多详情</button>
                                </div>
                                <small class="text-muted">9 mins</small>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card mb-4">
                        <svg class="bd-placeholder-img card-img-top" width="100%" height="225"
                             xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false"
                             role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title>
                            <rect width="100%" height="100%" fill="#55595c"></rect>
                            <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
                        </svg>
                        <div class="card-body">
                            <p class="card-text">
                                This is a wider card with supporting text below as a natural lead-in to
                                additional content. This content is a little bit longer.
                            </p>
                            <div class="d-flex">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-success">更多详情</button>
                                </div>
                                <small class="text-muted">9 mins</small>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card mb-4">
                        <svg class="bd-placeholder-img card-img-top" width="100%" height="225"
                             xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false"
                             role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title>
                            <rect width="100%" height="100%" fill="#55595c"></rect>
                            <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
                        </svg>
                        <div class="card-body">
                            <p class="card-text">
                                This is a wider card with supporting text below as a natural lead-in to
                                additional content. This content is a little bit longer.
                            </p>
                            <div class="d-flex">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-success">更多详情</button>
                                </div>
                                <small class="text-muted">9 mins</small>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="container">

        <section id="contents">
            <div class="bs-callout bs-callout-danger">
                <h2>内容中心</h2>
            </div>
            <div class="panel-body">
                内容中心内容中心内容中心内容中心内容中心
            </div>
        </section>

        <section id="setting">
            <div class="bs-callout bs-callout-danger">
                <h2>设置中心</h2>
            </div>
            <div class="panel-body">
                设置中心设置中心设置中心设置中心设置中心
            </div>
        </section>

        <section id="follow">
            <div class="bs-callout bs-callout-danger">
                <h2>关注列表</h2>
            </div>
            <div class="panel-body">
                关注列表关注列表关注列表关注列表
            </div>
        </section>
    </div>

    <div class="container">
        <div class="span7" style="text-align: center;" >
            <ul class="list-unstyled list-inline">
                <span>标签</span>
                <li><a class="btn btn-xs btn-success"><i class="fa fa-tag"></i>家庭</a></li>
                <li><a class="btn btn-xs  btn-info"><i class="fa fa-tag"></i>工作</a></li>
                <li><a class="btn btn-xs btn-success"><i class="fa fa-tag"></i>家庭</a></li>
                <li><a class="btn btn-xs btn-info"><i class="fa fa-tag"></i>孩子</a></li>
                <li><a class="btn btn-xs btn-success"><i class="fa fa-tag"></i>家庭</a></li>
                <li><a class="btn btn-xs  btn-info"><i class="fa fa-tag"></i>工作</a></li>
                <li><a class="btn btn-xs btn-success"><i class="fa fa-tag"></i>家庭</a></li>
            </ul>
        </div>
    </div>

    <footer class="footer">
        <div class="container">
            <hr>
            <div class="row footer-top">
                <div class="col-md-6 col-lg-6">
                    <h4>
                        致力于为广大开发者提供更多的优质技术文档和辅助开发工具!
                    </h4>
                </div>
                <div class="col-md-6 col-lg-5 col-lg-offset-1">
                    <div class="row">
                        <div class="col-sm-4">
                            <h4>关于</h4>
                            <ul class="list-unstyled">
                                <li><a href="#">关于我们</a></li>
                                <li><a href="#">友情链接</a></li>
                            </ul>
                        </div>
                        <div class="col-sm-4">
                            <h4>联系方式</h4>
                            <ul class="list-unstyled">
                                <li><a href="https://gitee.com/songlvjun">码云联系我</a></li>
                                <li><a href="https://blog.csdn.net/qq_34579060">CSDN联系我</a></li>
                            </ul>
                        </div>
                        <div class="col-sm-4">
                            <h4>技术相关</h4>
                            <ul class="list-unstyled">
                                <li><a href="http://www.bootcss.com/" target="_blank">Bootstrap中文网</a></li>
                                <li><a href="https://www.djangoproject.com/" target="_blank">Django</a></li>
                                <li><a href="https://www.python.org/" target="_blank">python官网</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <hr>
            <div class="row footer-bottom">
                <ul class="list-inline text-center">
                    <li>@ copyright by song 2019</li>
                    <li>
                        <a href="https://gitee.com/songlvjun/SongBoot">码云地址</a>
                    </li>
                </ul>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/gh/markgoodyear/scrollup@2.4.1/dist/jquery.scrollUp.min.js"></script>
    <a id="scrollUp" href="#top" style="position: fixed; z-index: 2147483647;display: none;">
        <i class="fa fa-angle-up"></i>
    </a>

    <script>
        $(function () {
            $.scrollUp({
                scrollName: "scrollUp",
                topDistance: "300",
                topSpeed: 300,
                animation: "fade",
                animationInSpeed: 200,
                animationOutSpeed: 200,
                scrollText: '<i class="fa fa-angle-up"></i>',
                activeOverlay: !1
            });

            $(".nav-sidebar li").bind("click", function () {
                $(this).siblings('li').removeClass('active');
                $(this).addClass('active');
            });
        });
    </script>

</body>
</html>